<template>
 <div class="itemContainer" @click.stop="onItemClicked">
    <img :src="item.Picture.BigUrl" alt="" class="itemImage">
    <div class="itemTitle">{{ item.Name }}</div>
 </div>
</template>
<script>
export default{
    name:'CategoryItem',
    props:{
        item:Object
    },
    data(){
        return{
            
        }
    },
    methods:{
        onItemClicked(){
            this.$emit('itemClicked', this.item);
        }
    },
    mounted(){
        
    }

}
</script>
<style scoped>
.itemContainer{
   
    /* width: 50px; */
    flex: 0 0 25%;
    /* height: 1.86667rem; */
    /* margin: 10px auto; */
    margin-top: 10px;
    padding: 0 10px;
    /* background-color: white; */
}
.itemTitle{
    font-size: 12px;
    text-align: center;
    background-color: white;
}
.itemImage{
    width: 100%;
    height: 80px;
    object-fit: contain;
    background-color: white;
}
</style>